<template>
  <div class="map">
    <div id="container" tabindex="0"></div>
    <div class="input-card" style="width:19rem" v-show="path=='/distribution'">
      <div id="map-features" class="c">
        <div class="input-item">
          <input type="checkbox" name="mapStyle" value="bg" checked />
          <span class="input-text">区域面（bg）</span>
        </div>
        <div class="input-item">
          <input type="checkbox" name="mapStyle" value="road" checked />
          <span class="input-text">道路（road）</span>
        </div>
        <div class="input-item">
          <input type="checkbox" name="mapStyle" value="building" checked />
          <span class="input-text">建筑物（building）</span>
        </div>
        <div class="input-item">
          <input type="checkbox" name="mapStyle" value="point" checked />
          <span class="input-text">标注（point）</span>
        </div>
      </div>
    </div>
    <!-- <button @click="add" class="btn">点我</button> -->
  </div>
</template>
<script>
// import AMap from "AMap";
import { mapState } from "vuex";
// import imgs from "../assets/image/sidebar.jpg";

import EOnLine from "@/assets/image/map/OnLine.png";
import EOffLine from "@/assets/image/map/OffLine.png";

import WIFIOffLin from "@/assets/image/map/WIFIOffLin.png";
import wifiOnLine from "@/assets/image/map/wifiOnLine.png";

import MOffLine from "@/assets/image/map/MOffLine.png";
import MOLine from "@/assets/image/map/MOLine.png";

import lampOffLine from "@/assets/image/map/lampOffLine.png";
import lampOnline from "@/assets/image/map/lampOnline.png";

import DisplayOffLine from "@/assets/image/map/DisplayOffLine.png";
import DisplayOnline from "@/assets/image/map/DisplayOnline.png";

import CameraOffLine from "@/assets/image/map/CameraOffLine.png";
import CameraOnLine from "@/assets/image/map/CameraOnLine.png";

import Offsound from "@/assets/image/map/Offsound.png";
import Onsound from "@/assets/image/map/Onsound.png";
export default {
  props: ["sensorId", "Meteorological"],
  data() {
    return {
      arr: [],
      nail: [],
      path: " ",
      sensorArr: []
    };
  },
  mounted() {
    if (this.$route.path == "/loopPage" || this.$route.path == "/lampPage") {
      this.map();
    } else {
      this.add();
      this.init();
    }
    if (this.path == "/MeteorologicalPage") {
    }
    this.path = this.$route.path;
  },
  computed: {
    ...mapState("boxList", ["groupLoopList", "imcType"])
  },

  watch: {
    groupLoopList(curVal, oldVal) {
      this.add();
    },
    sensorId(curVal, oldVal) {
      this.sensor();
    }
  },
  methods: {
    map() {
      this.$http
        .get("/api/threesuns/stat/elecBoxMap/get", {
          params: {
            imcType: this.$route.path == "/lampPage" ? 1 : 0
          }
        })
        .then(res => {
          if (res.data.data) {
            this.nail = res.data.data;
          }
          this.init();
        });
    },
    // 天气传感器坐标
    sensor() {
      this.$http
        .get("/api/threesuns/stat/sensors/weather/location/" + this.sensorId)
        .then(res => {
          if (res.data) {
            this.sensorArr = [];
            this.sensorArr.push(res.data.data);
            this.init();
          }
        });
    },
    add() {
      sessionStorage.setItem("coordinate", JSON.stringify(this.groupLoopList));
      let Cache_coordinates = JSON.parse(sessionStorage.getItem("coordinate"));
      this.arr = Cache_coordinates;
      this.init();
    },
    init() {
      // 路由地址
      let router = this.$route.path;
      var map = new AMap.Map("container", {
        resizeEnable: true,
        mapStyle: "amap://styles/dbc921cd58bfc91d309bb1809dc5d59b",
        features: ["bg", "road", "building", "point"],
      });
     
      function setMapFeatures() {
        var features = [];
        var inputs = document.querySelectorAll("#map-features input");
        inputs.forEach(function(input) {
          if (input.checked) {
            features.push(input.value);
          }
        });
        map.setFeatures(features);
      }
      //绑定checkbox点击事件
      var inputs = document.querySelectorAll("#map-features input");
      inputs.forEach(function(checkbox) {
        checkbox.onclick = setMapFeatures;
      });
      if (this.$route.path == "/loopPage" || this.$route.path == "/lampPage") {
        var lnglats = this.nail;
      } else if (this.$route.path == "/distribution") {
        var lnglats = this.arr;
      } else if (this.$route.path == "/MeteorologicalPage") {
        var lnglats = this.sensorArr;
      }
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      var OnLine = "";
      var OffLine = "";
      switch (this.Meteorological || this.imcType) {
        case "回路":
          OnLine = EOnLine;
          OffLine = EOffLine;
          break;
        case "单灯控制器":
          OffLine = lampOffLine;
          OnLine = lampOnline;
          break;
        case 0:
          OnLine = EOnLine;
          OffLine = EOffLine;
          break;
        case 1:
          OffLine = lampOffLine;
          OnLine = lampOnline;
          break;
        case 2:
          OnLine = MOLine;
          OffLine = MOffLine;
          break;
        case 3:
          OnLine = DisplayOnline;
          OffLine = DisplayOffLine;
          break;
        case 4:
          OnLine = wifiOnLine;
          OffLine = WIFIOffLin;
          break;
        case 5:
          OnLine = CameraOnLine;
          OffLine = CameraOffLine;
          break;
         case 8: 
          OnLine = Onsound;
          OffLine = Offsound;
          break;
            case 9: 
          OnLine = Onsound;
          OffLine = Offsound;
          break;
      }
      for (var i = 0, marker; i < lnglats.length; i++) {
         new AMap.Size(135, 40)
        var marker = new AMap.Marker({
          icon: lnglats[i].rtuStatus == 0 ? OffLine : OnLine,
          position: [lnglats[i].lng, lnglats[i].lat],
          map: map
        });
        if (router != "/page") {
          marker.content = `<div style="width:200px; height:200px;">
                              名称 : ${lnglats[i].name}<hr>
                                <ul >
                                  <li  style="margin-bottom:5px;"  >  <span>挂载数量 : </span> ${
                                    lnglats[i].loopSize
                                  } </li>
                                  <li  style="margin-bottom:5px;">  <span>状态 : </span> ${
                                    lnglats[i].rtuStatus == 0 ? "离线" : "在线"
                                  }</li>
                                  <li  style="margin-bottom:5px;">  <span>经度 : </span> ${
                                    lnglats[i].lng
                                  }</li>
                                  <li  style="margin-bottom:5px;">  <span>纬度 : </span> ${
                                    lnglats[i].lat
                                  }</li>
                                </ul>
                           </div>`;
        }
        if (router == "/distribution") {
          marker.on("mouseover", markerClick);
        }
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
    }
  }
};
</script>
<style scoped>
/deep/ .amap-marker img {
  width: 20px;
}
.map {
  
  position: relative;
  width: 100%;
  height: 100%;
  position: relative;
}
#container {
  width: 100%;
  height: 100%;
}
.btn {
  position: absolute;
  z-index: 5;
  top: 50px;
}
#map-features {
  position: absolute;
  z-index: 999;
  /* height:100px; */
  bottom: 80px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
}
/deep/ .amap-info-content {
  background: #0ac07e;
  color: #ffffff;
  font-size: 14px;
}
/deep/ .amap-info-content span {
  display: inline-block;
  width: 80px;
  background-color: #fff;
  color: #0ac07e;
  text-align: center;
}
</style>
